<!-- 
  YoutubeBigIcon.vue is a part of Moosync.
  
  Copyright 2022 by Sahil Gupte <sahilsachingupte@gmail.com>. All rights reserved.
  Licensed under the GNU General Public License. 
  
  See LICENSE in the project root for license information.
-->

<template>
  <svg
    width="75"
    height="86"
    viewBox="0 0 75 86"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    @click="$emit('click', $event)"
  >
    <path
      d="M73.4743 8.9617C73.0474 7.24259 72.2133 5.67482 71.0549 4.41442C69.8964 3.15403 68.4541 2.24496 66.8714 1.77772C61.0031 0.0285057 37.526 3.09021e-05 37.526 3.09021e-05C37.526 3.09021e-05 14.0526 -0.0284455 8.18047 1.64348C6.59881 2.13223 5.15944 3.05414 4.00055 4.32073C2.84166 5.58731 2.00216 7.15602 1.56265 8.87627C0.0149956 15.2467 5.49043e-06 28.4593 5.49043e-06 28.4593C5.49043e-06 28.4593 -0.0149838 41.7371 1.52143 48.0424C2.38332 51.5286 4.91278 54.2826 8.12801 55.2223C14.0563 56.9715 37.4697 57 37.4697 57C37.4697 57 60.9469 57.0284 66.8152 55.3606C68.3985 54.8942 69.8421 53.9872 71.0035 52.7294C72.1648 51.4715 73.0036 49.9064 73.4368 48.1888C74.9882 41.8225 74.9995 28.6139 74.9995 28.6139C74.9995 28.6139 75.0744 15.3321 73.4743 8.9617ZM30.0163 40.6997L30.035 16.2921L49.5475 28.5163L30.0163 40.6997Z"
      :fill="active ? '#E62017' : 'var(--textSecondary)'"
    />
    <path
      d="M14.5045 84V79.4455L10.8227 74.3864H12.1318L15.0909 78.4637L18.0363 74.3864H19.3045L15.6227 79.4727V84H14.5045ZM21.8354 84.1227C21.19 84.1227 20.6309 83.9818 20.1582 83.7C19.6854 83.4182 19.3173 83.0227 19.0536 82.5136C18.7991 81.9955 18.6718 81.3864 18.6718 80.6864C18.6718 79.9864 18.7991 79.3818 19.0536 78.8727C19.3173 78.3546 19.6854 77.9546 20.1582 77.6728C20.6309 77.3909 21.19 77.25 21.8354 77.25C22.4718 77.25 23.0263 77.3909 23.4991 77.6728C23.9809 77.9546 24.3491 78.3546 24.6036 78.8727C24.8672 79.3818 24.9991 79.9864 24.9991 80.6864C24.9991 81.3864 24.8672 81.9955 24.6036 82.5136C24.3491 83.0227 23.9809 83.4182 23.4991 83.7C23.0263 83.9818 22.4718 84.1227 21.8354 84.1227ZM21.8354 83.2364C22.4536 83.2364 22.9491 83.0182 23.3218 82.5818C23.6945 82.1364 23.8809 81.5046 23.8809 80.6864C23.8809 79.8591 23.6945 79.2273 23.3218 78.7909C22.9491 78.3546 22.4536 78.1364 21.8354 78.1364C21.2082 78.1364 20.7082 78.3546 20.3354 78.7909C19.9718 79.2273 19.79 79.8591 19.79 80.6864C19.79 81.5046 19.9718 82.1364 20.3354 82.5818C20.7082 83.0182 21.2082 83.2364 21.8354 83.2364ZM29.0035 84.1227C27.4126 84.1227 26.6172 83.2455 26.6172 81.4909V77.3728H27.7217V81.4773C27.7217 82.0682 27.8399 82.5046 28.0763 82.7864C28.3217 83.0682 28.7036 83.2091 29.2217 83.2091C29.7854 83.2091 30.2445 83.0227 30.599 82.65C30.9535 82.2682 31.1308 81.7636 31.1308 81.1364V77.3728H32.2354V84H31.1581V82.8818C30.949 83.2818 30.6535 83.5909 30.2717 83.8091C29.899 84.0182 29.4763 84.1227 29.0035 84.1227ZM36.961 84.1227C36.1792 84.1227 35.5928 83.9182 35.2019 83.5091C34.811 83.0909 34.6155 82.4909 34.6155 81.7091V78.2318H33.3201V77.3728H34.6155V75.3409H35.7201V77.3728H37.8201V78.2318H35.7201V81.6C35.7201 82.1182 35.8292 82.5136 36.0473 82.7864C36.2655 83.05 36.6201 83.1818 37.111 83.1818C37.2564 83.1818 37.4019 83.1636 37.5473 83.1273C37.6928 83.0909 37.8246 83.0545 37.9428 83.0182L38.1337 83.8636C38.0155 83.9273 37.8428 83.9864 37.6155 84.0409C37.3882 84.0955 37.1701 84.1227 36.961 84.1227ZM41.4147 84.1227C39.8238 84.1227 39.0284 83.2455 39.0284 81.4909V77.3728H40.1329V81.4773C40.1329 82.0682 40.2511 82.5046 40.4875 82.7864C40.7329 83.0682 41.1147 83.2091 41.6329 83.2091C42.1965 83.2091 42.6556 83.0227 43.0102 82.65C43.3647 82.2682 43.542 81.7636 43.542 81.1364V77.3728H44.6465V84H43.5693V82.8818C43.3602 83.2818 43.0647 83.5909 42.6829 83.8091C42.3102 84.0182 41.8874 84.1227 41.4147 84.1227ZM50.0676 84.1227C49.5403 84.1227 49.0767 84.0045 48.6767 83.7682C48.2858 83.5318 47.9903 83.2091 47.7903 82.8V84H46.7131V74.3864H47.8176V78.5182C48.0085 78.1273 48.304 77.8182 48.704 77.5909C49.104 77.3637 49.5585 77.25 50.0676 77.25C50.6585 77.25 51.1721 77.3909 51.6085 77.6728C52.054 77.9455 52.3949 78.3409 52.6312 78.8591C52.8767 79.3682 52.9994 79.9773 52.9994 80.6864C52.9994 81.3864 52.8767 81.9955 52.6312 82.5136C52.3949 83.0227 52.054 83.4182 51.6085 83.7C51.1721 83.9818 50.6585 84.1227 50.0676 84.1227ZM49.8358 83.2364C50.454 83.2364 50.9494 83.0182 51.3221 82.5818C51.6949 82.1364 51.8812 81.5046 51.8812 80.6864C51.8812 79.8591 51.6949 79.2273 51.3221 78.7909C50.9494 78.3546 50.454 78.1364 49.8358 78.1364C49.2176 78.1364 48.7222 78.3546 48.3494 78.7909C47.9767 79.2273 47.7903 79.8591 47.7903 80.6864C47.7903 81.5046 47.9767 82.1364 48.3494 82.5818C48.7222 83.0182 49.2176 83.2364 49.8358 83.2364ZM57.6495 84.1227C56.604 84.1227 55.7768 83.8182 55.1677 83.2091C54.5586 82.5909 54.2541 81.7546 54.2541 80.7C54.2541 80.0182 54.3904 79.4182 54.6631 78.9C54.9359 78.3727 55.3086 77.9682 55.7813 77.6864C56.2631 77.3955 56.8177 77.25 57.4449 77.25C58.3449 77.25 59.0495 77.5409 59.5586 78.1228C60.0677 78.6955 60.3222 79.4864 60.3222 80.4955V80.9182H55.3313C55.3677 81.6727 55.5859 82.25 55.9859 82.65C56.3859 83.0409 56.9404 83.2364 57.6495 83.2364C58.0495 83.2364 58.4313 83.1773 58.7949 83.0591C59.1586 82.9318 59.504 82.7273 59.8313 82.4455L60.2131 83.2227C59.9131 83.5045 59.5313 83.7273 59.0677 83.8909C58.604 84.0455 58.1313 84.1227 57.6495 84.1227ZM57.4722 78.0682C56.845 78.0682 56.3495 78.2637 55.9859 78.6546C55.6222 79.0455 55.4086 79.5591 55.345 80.1955H59.3677C59.3404 79.5227 59.1631 79 58.8359 78.6273C58.5177 78.2546 58.0631 78.0682 57.4722 78.0682Z"
      :fill="active ? 'var(--textPrimary)' : 'var(--textSecondary)'"
    />
  </svg>
</template>

<script lang="ts">
import { Vue } from 'vue-facing-decorator'
import { Component, Prop } from 'vue-facing-decorator'

@Component({
  emits: ['click']
})
export default class YoutubeBig extends Vue {
  @Prop({ default: false })
  active!: string
}
</script>
